<!--
  功能：模拟考试
  说明：30分钟限时考试，包含单选题和判断题，实时计时自动交卷
-->
<template>
	<view class="content bg-f8">
	<view v-if="showResult" class="result-page">
		<view class="header bg-ff border-b-ee shadow-sm" :style="'padding-top:'+$statusBarHeight+'px;'">
			<view class="header-box dis-flex-vc dis-flex-hsb">
				<view class="header-back dis-flex-vc" @click="goBack">
					<i class="gjjd-iconfont icon-xiangzuo font-s20 color-33"></i>
				</view>
				<view class="header-title font-s18 font-wb color-33 text-C">模拟考试</view>
				<view class="header-placeholder w-60"></view>
			</view>
	</view>
	
<view class="result-content dis-flex flex-column dis-flex-hv" :style="'padding-top:'+(50+$statusBarHeight)+'px;'">
	<view class="result-stats dis-flex dis-flex-ha w-full-percent">
			<text class="font-s16 color-33 text-C">得分:{{score}}分</text>
			<text class="font-s16 color-33 text-C">答对:{{correctCount}}题</text>
			<text class="font-s16 color-33 text-C">答错:{{wrongCount}}题</text>
			<text class="font-s16 color-33 text-C">未答:{{unansweredCount}}题</text>
		</view>
		
		<view class="success-btn bg-33 radius-8 dis-flex-hv transition-fast" @click="goBack">
			<text class="font-s16 color-ff">成功</text>
		</view>
	</view>
	</view>
	
	<view v-else>
		<view class="header bg-ff border-b-ee shadow-sm" :style="'padding-top:'+$statusBarHeight+'px;'">
			<view class="header-box dis-flex-vc dis-flex-hsb">
				<view class="header-back dis-flex-vc" @click="goBack">
					<i class="gjjd-iconfont icon-xiangzuo font-s20 color-33"></i>
				</view>
				<view class="header-title font-s18 font-wb color-33 text-C">模拟考试</view>
				<view class="header-placeholder w-60"></view>
			</view>
		</view>
			
		<view class="timer-bar" :style="'top:'+(50+$statusBarHeight)+'px;'">
			<view class="timer-box dis-flex-vc">
				<text class="timer-text font-s14 color-33">考试剩余时间:{{formattedTime}}</text>
					<text v-if="autoSubmitWarning" class="timer-warning font-s14 color-red">将在{{timeRemaining}}秒后自动交卷</text>
				</view>
			</view>
			
			<view class="body" :style="'padding-top:'+(40+$statusBarHeight+50)+'px;'">
				<view class="question-card bg-00b6ff radius-16">
					<view class="question-type">
						<text class="font-s14 font-wb color-ff">{{currentQuestion.type === 'judge' ? '判断题' : '单选题'}}</text>
					</view>
					
					<view class="question-content">
						<text class="question-text font-s15 color-ff">{{currentQuestion.question}}</text>
						
					<view class="options-list dis-flex flex-column">
					<view 
						v-for="(option, index) in currentQuestion.options" 
						:key="index"
						class="option-item dis-flex-vc radius-8 transition-all"
							:class="{'selected bg-0a3c88': userAnswers[currentIndex] === index, 'bg-ff': userAnswers[currentIndex] !== index}"
							@click="selectAnswer(index)"
						>
							<text v-if="userAnswers[currentIndex] === index" class="check-icon color-ff font-s16">✓</text>
							<text class="option-text font-s15" :class="userAnswers[currentIndex] === index ? 'color-ff' : 'color-33'">{{option}}</text>
						</view>
						</view>
					</view>
					
				<view class="pagination dis-flex-hsb dis-flex-vc">
					<view 
						class="page-btn bg-99 radius-8 transition-all"
							:class="{'disabled': currentIndex === 0}"
							@click="prevQuestion"
						>
							<text class="font-s14 color-ff">上一题</text>
						</view>
						
						<view class="page-info bg-ff radius-8">
							<text class="font-s14 color-33">{{currentIndex + 1}} / {{questions.length}}</text>
						</view>
						
						<view 
							class="page-btn bg-ff radius-8 transition-all"
							:class="{'disabled': currentIndex === questions.length - 1}"
							@click="nextQuestion"
						>
							<text class="font-s14 color-33">下一题</text>
						</view>
					</view>
				</view>
				
			<view class="action-buttons dis-flex flex-column">
				<view class="action-btn bg-0a3c88 radius-24 transition-all" @click="showQuestionSelector">
					<text class="font-s16 font-wb color-ff">选题</text>
				</view>
				<view class="action-btn bg-f9d52b radius-24 transition-all" @click="confirmSubmit">
					<text class="font-s16 font-wb color-33">交卷</text>
				</view>
			</view>
			</view>
			
<view class="selector-mask dis-flex mask-dark" style="position:fixed;top:0;left:0;right:0;bottom:0;" v-if="showSelector" @click="closeSelector">
	<view class="selector-panel bg-ff radius-top-20" @click.stop>
				<view class="dis-flex-hsb dis-flex-vc mar-B20">
					<text class="font-s16 font-wb color-33">单选题</text>
					<view class="close-btn" @click="closeSelector">
						<text class="font-s16 color-red">关闭</text>
					</view>
				</view>
					
			<view class="question-grid dis-flex-vc">
			<view 
				v-for="(item, index) in singleChoiceQuestions" 
				:key="'single-'+index"
				class="grid-item bg-ff radius-8 border-e0 transition-all"
					:class="{
						'current bg-00b6ff border-00b6ff': currentIndex === index,
						'answered border-00b6ff': userAnswers[index] !== null
					}"
				@click="jumpToQuestion(index)"
			>
					<text class="font-s14" :class="currentIndex === index ? 'color-ff' : 'color-33'">第{{index + 1}}题</text>
				</view>
			</view>
		
	<view class="dis-flex-hsb dis-flex-vc mar-T30 mar-B20">
		<text class="font-s16 font-wb color-33">判断题</text>
	</view>
			
	<view class="question-grid dis-flex-vc">
	<view 
		v-for="(item, index) in judgeQuestions" 
		:key="'judge-'+index"
		class="grid-item bg-ff radius-8 border-e0 transition-all"
			:class="{
				'current bg-00b6ff border-00b6ff': currentIndex === singleChoiceCount + index,
				'answered border-00b6ff': userAnswers[singleChoiceCount + index] !== null
			}"
		@click="jumpToQuestion(singleChoiceCount + index)"
	>
			<text class="font-s14" :class="currentIndex === singleChoiceCount + index ? 'color-ff' : 'color-33'">第{{singleChoiceCount + index + 1}}题</text>
		</view>
	</view>
				</view>
			</view>
			
	<view class="modal-mask dis-flex-hv mask-dark" style="position:fixed;top:0;left:0;right:0;bottom:0;" v-if="showSubmitModal" @click="closeSubmitModal">
		<view class="modal-content bg-ff radius-16" @click.stop>
			<view class="text-C font-s18 font-wb color-33 mar-B20">友情提示</view>
			<view class="modal-body">
				<text class="font-s15 color-33">还有{{unansweredCount}}题没答，确定要交卷吗？</text>
			</view>
				<view class="dis-flex mar-T30" style="justify-content:space-around;">
					<view class="modal-btn" @click="closeSubmitModal">
						<text class="font-s16 color-66">取消</text>
					</view>
					<view class="modal-btn" @click="submitExam">
						<text class="font-s16 color-00b6ff">确定</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
import { getMockExamQuestions, submitMockExam } from '@/api/competition';
import { useUserStore } from '@/store/user';
import { useCompetitionStore } from '@/store/competition';

// 业务规则（考试时长、题目数量、分值等）由后端API返回

export default {
	setup() {
		const userStore = useUserStore()
		const competitionStore = useCompetitionStore()
		return { userStore, competitionStore }
	},
	data() {
		return {
			paperId: null,
			startTime: null,
			currentIndex: 0,
			userAnswers: [],
			timeRemaining: 1800,
			timer: null,
			showSelector: false,
			showSubmitModal: false,
			showResult: false,
			score: 0,
			correctCount: 0,
			wrongCount: 0,
			unansweredCount: 0,
			questions: []
		}
	},
	computed: {
		currentQuestion() {
			return this.questions[this.currentIndex] || {};
		},
		formattedTime() {
			const hours = Math.floor(this.timeRemaining / 3600);
			const minutes = Math.floor((this.timeRemaining % 3600) / 60);
			const seconds = this.timeRemaining % 60;
			return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
		},
	autoSubmitWarning() {
		return this.timeRemaining <= UI_CONFIG.WARNING_THRESHOLD;
	},
		singleChoiceQuestions() {
			return this.questions.filter(q => q.type === 'single');
		},
		judgeQuestions() {
			return this.questions.filter(q => q.type === 'judge');
		},
		singleChoiceCount() {
			return this.singleChoiceQuestions.length;
		}
	},
	onLoad(options) {
		if (!this.competitionStore.checkMatchId()) return;
		
		if (options.paperId) {
			this.paperId = parseInt(options.paperId);
		}
		
		this.initQuestions();
		this.startTimer();
	},
	onUnload() {
		this.stopTimer();
	},
	methods: {
		goBack() {
			if (this.showResult) {
				uni.navigateBack();
			} else {
			uni.showModal({
				title: '友情提示',
				content: '考试中不能退出',
				showCancel: true,
				confirmText: '确定',
					cancelText: '取消',
					success: (res) => {
						// 不允许退出，只是关闭弹窗
					}
				});
			}
		},
		
	async initQuestions() {
		try {
			uni.showLoading({ title: '加载题目中...' });
			
			const res = await getMockExamQuestions({
				paperId: this.paperId,
				matchId: this.competitionStore.currentMatchId,
				userId: this.userStore.userId
			});
			
			if (res.code === 1 && res.data && res.data.questions) {
				this.questions = res.data.questions;
				this.userAnswers = new Array(this.questions.length).fill(null);
				this.timeRemaining = res.data.duration || 1800;
				this.unansweredCount = res.data.totalCount || this.questions.length;
				this.startTime = res.data.startTime || Date.now();
			} else {
				uni.showToast({ title: res.msg || '加载题目失败', icon: 'none' });
			}
			
			uni.hideLoading();
		} catch (error) {
			console.error('加载题目失败:', error);
			uni.hideLoading();
			uni.showToast({ title: '加载失败', icon: 'none' });
		}
	},
		
	startTimer() {
		this.timer = setInterval(() => {
			this.timeRemaining--;
			if (this.timeRemaining <= 0) {
				this.stopTimer();
				this.autoSubmitExam();
			}
		}, UI_CONFIG.TIMER_INTERVAL);
	},
		
		stopTimer() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		
	selectAnswer(index) {
		this.userAnswers[this.currentIndex] = index;
		this.unansweredCount = this.userAnswers.filter(answer => answer === null).length;
	},
		
		prevQuestion() {
			if (this.currentIndex > 0) {
				this.currentIndex--;
			}
		},
		
		nextQuestion() {
			if (this.currentIndex < this.questions.length - 1) {
				this.currentIndex++;
			}
		},
		
		showQuestionSelector() {
			this.showSelector = true;
		},
		
		closeSelector() {
			this.showSelector = false;
		},
		
		jumpToQuestion(index) {
			this.currentIndex = index;
			this.closeSelector();
		},
		
	confirmSubmit() {
		this.unansweredCount = this.userAnswers.filter(answer => answer === null).length;
		this.showSubmitModal = true;
	},
		
		closeSubmitModal() {
			this.showSubmitModal = false;
		},
		
	async submitExam() {
		try {
			this.stopTimer();
			this.closeSubmitModal();
			
			uni.showLoading({ title: '提交中...' });
			
			const answers = this.questions.map((q, index) => ({
				questionId: q.id,
				userAnswer: this.userAnswers[index]
			}));
			
			const currentTime = Date.now();
			const elapsedSeconds = Math.floor((currentTime - this.startTime) / 1000);
			
			const res = await submitMockExam({
				paperId: this.paperId,
				userId: this.userStore.userId,
				matchId: this.competitionStore.currentMatchId,
				startTime: this.startTime,
				elapsedSeconds: elapsedSeconds,
				answers: answers
			});
			
			uni.hideLoading();
			
			if (res.code === 1 && res.data) {
				this.score = res.data.score;
				this.correctCount = res.data.correctCount;
				this.wrongCount = res.data.wrongCount;
				this.unansweredCount = res.data.unansweredCount;
				this.showResult = true;
				
				if (res.data.points) {
					setTimeout(() => {
						uni.showToast({
							title: `获得${res.data.points}积分`,
							icon: 'success'
						});
					}, 500);
				}
			} else {
				uni.showToast({ title: res.msg || '提交失败', icon: 'none' });
			}
			
		} catch (error) {
			console.error('提交失败:', error);
			uni.hideLoading();
			uni.showToast({ title: '提交失败', icon: 'none' });
		}
	},
	
	async autoSubmitExam() {
		await this.submitExam();
	}
	}
}
</script>

<style scoped>
.content {
	min-height: 100vh;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
}

.header-box {
	height: 100rpx;
	padding: 0 30rpx;
}

.header-back {
	width: 60rpx;
	height: 60rpx;
}

.header-title {
	flex: 1;
}

.timer-bar {
	position: fixed;
	left: 0;
	right: 0;
	padding: 25rpx;
	z-index: 9998;
	background-color: transparent;
	font-weight: bold;
}

.timer-box {
	padding: 5rpx 0;
	gap: 15rpx;
	flex-wrap: wrap;
}

.timer-warning {
	margin-left: 10rpx;
}

.body {
	padding: 20rpx;
	padding-bottom: 30rpx;
}

.question-card {
	padding: 20rpx;
	margin-top: 5rpx;
}

.question-type {
	display: inline-block;
	padding: 0 0 15rpx 0;
}

.question-content {
	padding: 0;
}

.question-text {
	display: block;
	line-height: 1.8;
	margin-bottom: 30rpx;
}

.options-list {
	gap: 15rpx;
	margin-bottom: 20rpx;
}

.option-item {
	padding: 20rpx;
	gap: 10rpx;
	align-items: center;
}

.option-item.transition-all:active {
	transform: scale(0.98);
}

.check-icon {
	font-weight: bold;
	flex-shrink: 0; 
	line-height: 1; 
	display: flex;
	align-items: center;
}

.option-text {
	line-height: 1.5;
	flex: 1;
}

.pagination {
	padding: 20rpx 0 0;
	gap: 15rpx;
}

.page-btn {
	flex: 1;
	padding: 12rpx 20rpx;
	text-align: center;
}

.page-btn.transition-all:active:not(.disabled) {
	transform: scale(0.95);
	opacity: 0.8;
}

.page-btn.disabled {
	opacity: 0.5;
}

.page-info {
	flex: 1;
	padding: 12rpx 20rpx;
	text-align: center;
}

.action-buttons {
	margin-top: 30rpx;
	gap: 10rpx;
}

.action-btn {
	padding: 18rpx 20rpx;
	text-align: center;
}

.action-btn.transition-all:active {
	transform: scale(0.95);
	opacity: 0.9;
}

.selector-mask {
	z-index: 10000;
	align-items: flex-start;
	padding-top: 100rpx;
}

.selector-panel {
	width: 100%;
	max-height: 80vh;
	overflow-y: auto;
	padding: 30rpx;
}

.close-btn {
	padding: 10rpx 20rpx;
}

.question-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15rpx;
}

.grid-item {
	padding: 15rpx;
	text-align: center;
}

.grid-item.transition-all:active {
	transform: scale(0.95);
}

.modal-mask {
	z-index: 10001;
}

.modal-content {
	width: 80%;
	padding: 30rpx;
}

.modal-body {
	text-align: center;
	padding: 20rpx 0;
	line-height: 1.8;
}

.modal-btn {
	padding: 15rpx 50rpx;
}

.result-page {
	min-height: 100vh;
}

.result-content {
	padding: 40rpx 20rpx;
	min-height: 60vh;
}

.result-stats {
	margin-bottom: 100rpx;
	flex-wrap: wrap;
	gap: 20rpx;
}

.success-btn {
	padding: 20rpx 80rpx;
}

.success-btn:active {
	transform: scale(0.95);
	opacity: 0.9;
}
</style>